<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入类库 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>  
		
		</style>
	</head>
	<body>

		<div id="app">
			
			<mydialog v-if="show"   :show.sync="show"></mydialog>
				
			<button @click="toggleShow">显示/隐藏 :: dialog</button>		
		</div>
		
		
		<template id="mydialog">
			<div   style="width:100px;height:100px;border:solid 1px red" >
				弹出框
				dialog
				
				
				<button type="button" @click="close">关闭dialog</button>
			</div>
			
		</template>
		
		<script>
			
			
			
			
			
			//只有跟 Vue对象的date 声明时 JSON对象
			let vm = new Vue({
				el: '#app',
				
				data: {
					show:true
				},
				//上面的省略的写法
				components:{
					mydialog:{
						props:['show'],
						template:'#mydialog',
						methods:{
							close(){
								// this.show = flase
								this.$emit("update:show",false);
							}
						}
					}
				},
				methods:{
					toggleShow(){
						this.show = !this.show
					}
				}
				

			});
		</script>

	</body>
</html>
